<template>
  <div id="app">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
// 方式 1: 导入整个 three.js核心库
import * as Three from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default {
  name: "App",
  created() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      const scene = new Three.Scene();

      const g = new Three.BoxGeometry(1, 1, 1);

      const materials = this.useBox();

      const cube = new Three.Mesh(g, materials);
      cube.material.wireframe = true;
      cube.geometry.scale(1, 1, -1);
      scene.add(cube);

      const camera = new Three.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.set(0, 0, 0.01);
      const renderer = new Three.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.render(scene, camera);
      document.getElementById("container").appendChild(renderer.domElement);

      function animate() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
      }

      animate();

      new OrbitControls(camera, renderer.domElement);
    },
    useBox() {
      let materials = [];
      const basePath = "static/cube/Bridge2";
      const ext = "jpg";

      [
        `/posx.${ext}`,
        `/negx.${ext}`,
        `/posy.${ext}`,
        `/negy.${ext}`,
        `/posz.${ext}`,
        `/negz.${ext}`,
      ].forEach((path) => {
        new Three.TextureLoader().load(`${basePath}${path}`, (material) => {
          materials.push(new Three.MeshBasicMaterial({ map: material }));
        });
      });
      return materials;
    },
  },
};
</script>

<style lang="less">
body {
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .container {
    width: 100vw;
    height: 100vh;
  }
}
</style>
